<template>
  <div id="main">饼图</div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)
    var option = {
      title: {
        text: '薪资 Salary'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['期望薪资', '实际薪资','季度奖金']
      },
      grid: {
        left: '0%',
        right: '0%',
        bottom: '20%',
        top: '15%',
        width: '100%',
        containLabel: true
      },
      // dataZoom: [{
      //   type: 'inside',
      //   start: 0,
      //   end: 100
      // },
      // {
      //   start: 0,
      //   end: 100
      // }
      // ],

      xAxis: {
        type: 'category',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        name: '期望薪资',
        color: 'red',
        data: [400, 932, 3000, 934, 1000, 1300, 500],
        type: 'line',
        smooth: true,
        symbol: 'none'
      },
      {
        name: '实际薪资',
        color: '#40da6f',
        data: [600, 1500, 1800, 2000, 1450, 2000, 3000],
        type: 'line',
        smooth: true,
        symbol: 'none'
      },
      {
        name: '季度奖金',
        color: '#088aee',
        data: [100, 1500, 600, 2100, 1470, 1000, 1800],
        type: 'line',
        smooth: true,
        symbol: 'none'
      }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }
}
</script>

<style lang="scss" scoped>
#main{
  width: 1300px;
  height: 400px;
}
</style>
